<template>
    <box width="920px"
         height="190px"
         left="500px"
         top="830px"
         title="供应链">
        <div class="bottom flex">
            <div class="cont">
                <my-title title="天猫（全链路）"
                          left="0px"
                          top="0px">
                    <my-marquee :info="info.tminfo"
                                :width="300"></my-marquee>
                </my-title>
                <div class="flex space-around">
                    <div class="item flex"
                         v-for="(item, index) in info.tm"
                         :key="`item-${index}`">
                        <img :src="
                                require(`@/assets/img/home/bottom-icon-${
                                    index + 1
                                }.png`)
                            "
                             alt="" />
                        <div>
                            <div>
                                <span class="val">{{ item.val }}</span>
                                <span class="unit">{{ item.unit }}</span>
                            </div>
                            <label>{{ item.label }}</label>
                            <div class="per"
                                 v-show="index != 0">
                                <span v-if="index == 1">环比 {{ item.percent }}</span>
                                <span v-else>同比 {{ item.percent }}</span>
                                <img :src="
                                        require(`@/assets/img/home/bottom-icon-${
                                            item.rise ? 8 : 7
                                        }.png`)
                                    "
                                     alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cont">
                <my-title title="京东（前置仓）"
                          color="orange"
                          left="0px"
                          top="0px">
                    <my-marquee :info="info.jdinfo"
                                :width="300"></my-marquee>
                </my-title>
                <div class="flex space-around">
                    <div class="item flex"
                         v-for="(item, index) in info.jd"
                         :key="`item-${index}`">
                        <img :src="
                                require(`@/assets/img/home/bottom-icon-${
                                    index + 4
                                }.png`)
                            "
                             alt="" />
                        <div>
                            <div>
                                <span class="val">{{ item.val }}</span>
                                <span class="unit">{{ item.unit }}</span>
                            </div>
                            <label>{{ item.label }}</label>
                            <div class="per"
                                 v-show="index != 0">
                                <span v-if="index == 1">环比 {{ item.percent }}</span>
                                <span v-else>同比 {{ item.percent }}</span>
                                <img :src="
                                        require(`@/assets/img/home/bottom-icon-${
                                            item.rise ? 8 : 7
                                        }.png`)
                                    "
                                     alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    computed: {
        tmtitle() {
            return this.info.tminfo ? `天猫（全链路）${this.info.tminfo}` : ''
        },
        jdtitle() {
            return this.info.jdinfo ? `京东（前置仓）${this.info.jdinfo}` : ''
        },
    },
    methods: {},
    created() {},
    mounted() {},
}
</script>
<style lang='less' scoped>
.bottom {
    width: 100%;
    height: 140px;
    .cont {
        position: relative;
        width: 50%;
        height: 140px;
        padding-top: 40px;
        .item {
            img {
                margin-right: 6px;
            }
            .val {
                font-size: 20px;
                color: #33bbff;
                font-weight: bold;
            }
            .unit {
                font-size: 12px;
                color: #8fadcc;
                margin-left: 2px;
            }
            label {
                display: block;
                font-size: 14px;
                margin: 8px 0;
            }
            .per {
                font-size: 12px;
                color: #8fadcc;
            }
        }
    }
}
</style>
